"use client";

import { useState, useEffect } from "react";
import { Button } from "@repo/ui/button";
import styles from "../page.module.css";

export default function AdminPage() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [selectedPath, setSelectedPath] = useState("/");
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [authError, setAuthError] = useState("");
  const [userInfo, setUserInfo] = useState<any>(null);

  // 预定义的路径选项
  const pathOptions = [
    { value: "/", label: "首页" },
    { value: "/about", label: "关于页面" },
    { value: "/user/1", label: "用户详情页面" },
    { value: "/realtime", label: "实时数据页面" }
  ];

  // 检查访问权限
  useEffect(() => {
    checkAccess();
  }, []);

  const checkAccess = async () => {
    try {
      const response = await fetch('/api/admin/auth', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // 可以传递用户信息或token
          timestamp: Date.now()
        })
      });

      const data = await response.json();
      
      if (data.authorized) {
        setIsAuthorized(true);
        setUserInfo(data.userInfo);
      } else {
        setAuthError(data.message || '访问被拒绝');
      }
    } catch (error) {
      setAuthError('网络错误，无法验证访问权限');
    }
  };

  // 重新验证页面
  const revalidatePage = async (path: string) => {
    setLoading(true);
    setResult(null);

    try {
      const response = await fetch('/api/revalidate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-revalidate-token': 'your-secret-token' // 在实际项目中应该使用环境变量
        },
        body: JSON.stringify({ path })
      });

      const data = await response.json();
      setResult(data);

      if (data.success) {
        // 显示成功消息
        alert(`✅ 页面 ${path} 重新验证成功！`);
      } else {
        alert(`❌ 重新验证失败: ${data.error}`);
      }
    } catch (error) {
      console.error('重新验证失败:', error);
      setResult({ error: '网络请求失败' });
      alert('❌ 网络请求失败，请检查控制台');
    } finally {
      setLoading(false);
    }
  };

  // 批量重新验证
  const revalidateAll = async () => {
    setLoading(true);
    setResult(null);

    try {
      const promises = pathOptions.map(option => 
        fetch('/api/revalidate', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'x-revalidate-token': 'your-secret-token'
          },
          body: JSON.stringify({ path: option.value })
        }).then(res => res.json())
      );

      const results = await Promise.all(promises);
      const successCount = results.filter(r => r.success).length;
      
      setResult({
        success: true,
        message: `批量重新验证完成，成功: ${successCount}/${pathOptions.length}`,
        details: results
      });

      alert(`✅ 批量重新验证完成！成功: ${successCount}/${pathOptions.length}`);
    } catch (error) {
      console.error('批量重新验证失败:', error);
      setResult({ error: '批量重新验证失败' });
      alert('❌ 批量重新验证失败');
    } finally {
      setLoading(false);
    }
  };

  // 如果未授权，显示访问被拒绝页面
  if (!isAuthorized) {
    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <h1>🚫 访问被拒绝</h1>
          <p>此页面仅限公司内部访问</p>
        </div>
        
        <div className={styles.main}>
          <div className={styles.errorBox}>
            <h2>访问权限验证失败</h2>
            <p>{authError}</p>
            <div className={styles.errorDetails}>
              <h3>可能的原因：</h3>
              <ul>
                <li>您不在公司内部网络</li>
                <li>IP地址不在白名单中</li>
                <li>缺少必要的认证信息</li>
                <li>访问令牌已过期</li>
              </ul>
            </div>
            <Button 
              appName="web" 
              onClick={() => window.location.href = '/'}
              className={styles.actionButton}
            >
              返回首页
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1>🔄 页面重新验证管理</h1>
        <p>使用 On-demand Revalidation 立即更新页面缓存</p>
        {userInfo && (
          <div className={styles.userInfo}>
            <span>👤 当前用户: {userInfo.name}</span>
            <span>🏢 部门: {userInfo.department}</span>
            <span>📍 IP: {userInfo.ip}</span>
          </div>
        )}
      </div>

      <div className={styles.main}>
        {/* 单个页面重新验证 */}
        <section className={styles.section}>
          <h2>单个页面重新验证</h2>
          <div className={styles.controlGroup}>
            <label htmlFor="path-select">选择页面:</label>
            <select 
              id="path-select"
              value={selectedPath}
              onChange={(e) => setSelectedPath(e.target.value)}
              className={styles.select}
            >
              {pathOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label} ({option.value})
                </option>
              ))}
            </select>
          </div>
          
          <Button 
            appName="web"
            onClick={() => revalidatePage(selectedPath)}
            disabled={loading}
            className={styles.actionButton}
          >
            {loading ? "重新验证中..." : `重新验证 ${selectedPath}`}
          </Button>
        </section>

        {/* 批量重新验证 */}
        <section className={styles.section}>
          <h2>批量重新验证</h2>
          <p>重新验证所有主要页面</p>
          <Button 
            appName="web"
            onClick={revalidateAll}
            disabled={loading}
            className={styles.actionButton}
          >
            {loading ? "批量重新验证中..." : "重新验证所有页面"}
          </Button>
        </section>

        {/* 结果展示 */}
        {result && (
          <section className={styles.section}>
            <h2>操作结果</h2>
            <div className={styles.resultBox}>
              <pre className={styles.resultJson}>
                {JSON.stringify(result, null, 2)}
              </pre>
            </div>
          </section>
        )}

        {/* 使用说明 */}
        <section className={styles.section}>
          <h2>📖 使用说明</h2>
          <div className={styles.instructions}>
            <h3>什么是 On-demand Revalidation？</h3>
            <p>
              当您设置了 <code>revalidate = 60</code> 时，页面每60秒才会重新生成。
              但有时候您希望立即更新页面，比如管理员发布了新内容、商品价格更新等。
              这时候就需要"按需重新验证"来立即触发页面重新生成。
            </p>

            <h3>工作原理</h3>
            <ol>
              <li>调用 <code>/api/revalidate</code> API</li>
              <li>Next.js 立即在后台重新生成指定页面</li>
              <li>更新缓存，后续用户访问时看到最新内容</li>
            </ol>

            <h3>实际应用场景</h3>
            <ul>
              <li>CMS 发布新文章后立即更新首页</li>
              <li>商品价格调整后立即更新商品页面</li>
              <li>用户提交评论后立即更新评论列表</li>
              <li>管理员更新配置后立即生效</li>
              <li>项目发布更新后立即刷新缓存</li>
            </ul>

            <h3>安全考虑</h3>
            <ul>
              <li>使用 token 验证请求来源</li>
              <li>限制 API 调用频率</li>
              <li>记录操作日志</li>
              <li>在生产环境中使用环境变量存储密钥</li>
              <li>限制管理页面访问权限</li>
            </ul>
          </div>
        </section>
      </div>

      <footer className={styles.footer}>
        <Button appName="web" onClick={() => window.location.href = '/'}>
          返回首页
        </Button>
      </footer>
    </div>
  );
}
